<template>
	<view class="page">
		<u-notify message="Hi uView" :show="show"></u-notify>
		<view class="header">
			<view class="filter" :class="{ active: selectedFilter === 'all' }" @click="selectFilter('all')">
				全部{{ totalReviews }}
			</view>
		</view>

		<!-- 评价部分 -->
		<view v-for="review in filteredReviews" :key="review.id" class="review-container">
			<view class="review-header">
				<image :src="review.avatar" class="user-avatar" />
				<view class="user-info">
					<!-- 用户名 -->
					<text style="margin-left: -60px;" class="username">用户名：{{ review.username }}</text>
				<!-- 	<view class="star-rating">
						<!-- 评价星级 -->
						<!-- <text v-for="star in 5" :key="star" :class="{ 'active-star': star <= review.rating }">★</text>
					</view> --> 
				</view>
				<!-- 评价日期 -->
				<text class="review-date">{{ review.date }}</text>
			</view>
			<!-- 评价内容 -->
			<text class="review-text">{{ review.content }}</text>
		</view>

		<view class="order-status">
			<!-- 收藏图标 -->
			<view class="status-item" @click="toggleFavorite" :class="{ animate: isFavoriteClicked }">
				<image v-if="!isFavoriteClicked" src="/static/motif/shoucang1.png" class="order-icon" />
				<image v-if="isFavoriteClicked" src="/static/motif/shoucang2.png" class="order-icon" />
				<text class="status-text">收藏</text>
			</view>

			<!-- 加入购物车图标 -->
			<view class="status-item" @click="toggleCart" :class="{ animate: isCartClicked }">
				<image v-if="!isCartClicked" src="/static/motif/jiarugouwuche1.png" class="order-icon" />
				<image v-if="isCartClicked" src="/static/motif/jiarugouwuche2.png" class="order-icon" />
				<text class="status-text">加入购物车</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllGoods,
		findAllEvalue
	} from '../../api/tome.js'
	export default {
		data() {
			return {
				show: true,
				totalReviews: '', // 全部评论数量
				imageReviews: '', // 含图片评论数量
				selectedFilter: 'all', // 当前选中的过滤条件
				reviews: [], // 评论数据
				isFavoriteClicked: false, // 收藏按钮是否被点击
				isCartClicked: false, // 加入购物车按钮是否被点击
			};
		},
		computed: {
			// 顶部菜单切换
			filteredReviews() {
				if (this.selectedFilter === 'images') {
					return this.reviews.filter((review) => review.image && review.image.length > 0);
				}
				return this.reviews;
			}
		},
		mounted() {
			// 组件挂载时请求数据
			this.fetchReviews();
			this.selectEvalue();
		},
		methods: {
			// 获取评论
			selectEvalue(){
				// 获取商品id
				let goodId = this.$cookies.get("goodsId");
				// 进行页面显示
				findAllEvalue({
					goodsId: goodId
				}).then(request => {
					console.log(request.data)
					// 转换数据格式
					const reviews = request.data.map(evalItem => {
					  return {
					    username: evalItem.tuser[0].userName, // 提取用户名
					    rating: null, // 原始数据中没有评分，所以这里设为 null 或者根据需要进行计算
					    content: evalItem.comment // 提取评论
					  };
					});
					this.reviews = reviews
					// 输出结果
					console.log(reviews);
					console.log("集合",this.reviews);
				})
				if(this.reviews==null){
					this.show = true
				}
			},
			// 切换菜单
			selectFilter(filter) {
				this.selectedFilter = filter;
			},
			// 从后端获取评论数据
			fetchReviews() {},

			// 切换收藏按钮状态
			toggleFavorite() {
				this.isFavoriteClicked = !this.isFavoriteClicked;
			},
			// 切换加入购物车按钮状态
			toggleCart() {
				this.isCartClicked = !this.isCartClicked;
			}
		}
	};
</script>

<style scoped>
	.page {
		padding-bottom: 80px;
	}

	.header {
		display: flex;
		justify-content: space-around;
		margin-bottom: 10px;
	}

	.filter {
		padding: 5px 10px;
		color: #333;
		border-bottom: 2px solid transparent;
	}

	.filter.active {
		color: #00b4d8;
		border-color: #00b4d8;
	}

	.review-container {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-info .username {
		font-weight: bold;
	}

	.star-rating {
		color: #f8c12e;
		font-size: 1.1em;
	}

	.star-rating .active-star {
		color: #f8c12e;
	}

	.review-text {
		margin: 10px 0;
	}

	.review-date {
		font-size: 0.8em;
		color: #999;
		margin-left: 100px;
	}

	.image-gallery {
		display: flex;
		flex-wrap: wrap;
	}

	.review-image {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		margin: 5px;
		object-fit: cover;
	}

	/* 底部导航栏，固定在页面底部 */
	.order-status {
		position: fixed;
		bottom: 0;
		width: 100%;
		justify-content: space-around;
		padding: 12px 0;
		border-top: 1px solid #eeeeee;
		background-color: #ffffff;
		box-shadow: 0 -2px 8px rgba(218, 218, 218, 0.1);
		display: flex;
		justify-content: space-evenly;
		width: 100%;
	}

	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.status-text {
		font-size: 14px;
		color: #333333;
	}

	.order-icon {
		width: 30px;
		height: 30px;
	}
	/* 点击收藏和加入购入车动画 */
	.animate {
	    animation: bounce 0.3s ease-in-out;
	}
	@keyframes bounce {
	    0%, 100% {
	        transform: scale(1);
	    }
	    50% {
	        transform: scale(1.2);
	    }
	}
	
</style>